<template>
    <div class="home">
        <v-Head></v-Head>
        <!-- 滚动 -->
        <div class="top">
            <div class="top-notice">
                <svg t="1721991719439" class="icon notice1" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2600" width="20" height="20"><path d="M576 701.6v-65.6c55.2-14.4 96-64 96-124s-40.8-109.6-96-124v-65.6C666.4 337.6 736 416.8 736 512s-69.6 174.4-160 189.6z m0-568v64.8c145.6 29.6 256 159.2 256 313.6 0 154.4-110.4 284-256 313.6v64.8c181.6-30.4 320-188 320-378.4S757.6 164 576 133.6zM256 384H128v256h128l256 256V128L256 384z" p-id="2601" fill="#1296db"></path></svg>
                <div class="notice2">最新公告</div>
            </div>
            <vue-seamless-scroll :data="info" class="top-scoll"  :class-option="defineScroll">
                <ul class="top-ul">
                    <li v-for="item in info" @click="topage" :key="item.id" class="top-li">
                        <div class="li1">{{item.title}}</div>
                        <div class="li2">{{ item.content }}</div>
                        <div class="li3">
                            <div class="li3-content">{{ item.createtime }}</div>
                            <router-link to="/service/postMessage" tag="div" class="li3-to">更多</router-link>
                        </div>
                    </li>
                </ul>
            </vue-seamless-scroll>   
        </div>
        <!-- 滚动下方 -->
        <div class="middle">
            <!-- 第一行 -->
            <div class="m1">
                <div class="m1-list1">
                    <div class="m1-left">
                        <svg t="1721996477480" class="icon" viewBox="0 0 1028 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5056"  height="60"><path d="M815.814506 299.350645c0 165.306834-134.011812 299.350645-299.350645 299.350645s-299.350645-134.011812-299.350645-299.350645c0-165.306834 134.011812-299.350645 299.350645-299.350645s299.350645 134.011812 299.350645 299.350645z" fill="#1296db" p-id="5057"></path><path d="M763.52814 612.780851c-69.75782 55.070279-156.219118 85.661323-247.064279 85.661323-91.901128 0-179.1944-31.295022-249.27221-87.421268-184.698228 67.805881-267.19165 304.758476-267.19165 412.979094l1027.711884 0c0-107.260648-83.133402-342.549295-264.183744-411.18715z" fill="#1296db" p-id="5058"></path></svg>
                    </div>
                    <div class="m1-right">
                        <div class="m1-number">
                            {{ unumber }}
                        </div>
                        <div class="m1-title">
                            系统用户数
                        </div>
                    </div>
                </div>
                <div class="m1-list2">
                    <div class="m1-left">
                        <svg t="1722040974378" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2373"  height="60"><path d="M769.9 942.3H266c-59.5 0-107.9-48.2-107.9-107.4V185.7c0-59.2 48.4-107.4 107.9-107.4h409.2c12.2 0 23.9 4.4 33 12.5l2 1.7 141.7 191.8c16.5 15.7 26 37.5 26 60.4v490.2c-0.1 59.2-48.5 107.4-108 107.4zM266 128.3c-31.9 0-57.9 25.8-57.9 57.4v649.2c0 31.7 26 57.4 57.9 57.4h503.9c31.9 0 57.9-25.8 57.9-57.4V344.7c0-9.5-4.1-18.6-11.2-24.9l-2-1.7-140.2-189.8H266z" fill="#1afa29" p-id="2374"></path><path d="M852.8 355.5H716.9c-36 0-65.4-29.3-65.4-65.4V103.3h47.4v186.8c0 9.9 8.1 17.9 17.9 17.9h135.9v47.5zM628.9 410.5H290.8c-13.8 0-25-11.2-25-25s11.2-25 25-25H629c13.8 0 25 11.2 25 25s-11.3 25-25.1 25zM628.9 536.9H290.8c-13.8 0-25-11.2-25-25s11.2-25 25-25H629c13.8 0 25 11.2 25 25-0.1 13.8-11.3 25-25.1 25zM628.9 666.5H290.8c-13.8 0-25-11.2-25-25s11.2-25 25-25H629c13.8 0 25 11.2 25 25s-11.3 25-25.1 25z" fill="#1afa29" p-id="2375"></path></svg>
                    </div>
                    <div class="m1-right">
                        <div class="m1-number">
                            {{ onumber }}
                        </div>
                        <div class="m1-title">
                            计费订单数量
                        </div>
                    </div>
                </div>
                <div class="m1-list3">
                    <div class="m1-left">
                        <svg t="1722041184894" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11178"  height="60"><path d="M896 853.333333a64 64 0 0 1-128 0v-21.333333H291.541333v21.333333a64 64 0 0 1-128 0v-21.333333H149.333333A64 64 0 0 1 85.333333 768v-256a64 64 0 0 1 64-64h3.157334l45.653333-308.053333A64 64 0 0 1 261.418667 85.333333h543.829333a64 64 0 0 1 63.274667 54.613334l45.653333 308.053333h3.157333A64 64 0 0 1 981.333333 512v256a64 64 0 0 1-64 64H896v21.333333zM330.666667 597.333333h-85.333334a53.333333 53.333333 0 0 0-5.461333 106.410667l5.461333 0.256h85.333334a53.333333 53.333333 0 0 0 0-106.666667z m490.666666 0h-85.333333a53.333333 53.333333 0 0 0-5.461333 106.410667l5.461333 0.256h85.333333a53.333333 53.333333 0 0 0 0-106.666667z m-98.133333-384H346.538667a34.133333 34.133333 0 0 0-32.853334 25.045334l-0.938666 4.522666-27.733334 205.098667H785.066667l-28.032-205.141333a34.133333 34.133333 0 0 0-29.226667-29.226667L723.2 213.333333z" fill="#efb336" p-id="11179"></path></svg>
                    </div>
                    <div class="m1-right">
                        <div class="m1-number">
                            {{ cnumber }}
                        </div>
                        <div class="m1-title">
                            车位总数
                        </div>
                    </div>
                </div>
                <div class="m1-list4">
                    <div class="m1-left">
                        <svg t="1722041321746" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13716" width="60" height="60"><path d="M1021.701044 385.106282c-1.576456-14.371339-13.747927-25.556904-28.538526-25.556904-14.788607 0-26.961075 11.185565-28.535539 25.556904l-0.184235 0 0 498.48162c0 45.755054-37.220484 82.97255-82.973546 82.97255L144.285518 966.560453c-45.749079 0-82.971555-37.217497-82.971555-82.97255L61.313963 140.418073c0-45.752066 37.222476-82.973546 82.971555-82.973546l494.903474 0 0-0.04083c15.495672-0.420255 27.937023-13.082689 27.937023-28.680935s-12.441351-28.261675-27.937023-28.680935L639.188992 0 144.285518 0C66.85994 0 3.870432 62.990503 3.870432 140.415085l0 743.171821c0 77.424582 62.989507 140.413094 140.415085 140.413094l737.18368 0c77.426574 0 140.415085-62.988512 140.415085-140.413094l0-498.480624L1021.701044 385.106282z" fill="#B28B7C" p-id="13717"></path><path d="M282.007782 685.917505l-0.130458 0.53478c-2.351239 9.9726-4.37683 28.630146 8.48876 41.486773 7.976885 7.989831 18.186501 10.239492 27.163235 10.239492 5.478258 0 10.502401-0.840511 14.278724-1.725835l156.881726-41.424034L988.688093 195.030357c17.481428-17.479436 27.107467-40.718961 27.107467-65.437346 0-24.720377-9.627035-47.960897-27.107467-65.439337l-34.602353-34.602353c-36.086193-36.082209-94.795469-36.092168-130.882658-0.000996L323.157953 529.596451 282.007782 685.917505zM369.286456 576.789535l72.245084 72.237117-97.152684 24.908595L369.286456 576.789535zM403.861921 530.12426l390.7628-390.759813 84.248255 84.247259L488.111171 614.37351 403.861921 530.12426zM913.466366 70.165716l34.604345 34.604345c13.687179 13.687179 13.687179 35.955735 0 49.645902l-28.582344 28.578361-84.243275-84.247259 28.578361-28.580352C877.513619 56.474553 899.786157 56.483516 913.466366 70.165716z" fill="#B28B7C" p-id="13718"></path></svg>
                    </div>
                    <div class="m1-right">
                        <div class="m1-number">
                            {{ fnumber }}
                        </div>
                        <div class="m1-title">
                            用户反馈数量
                        </div>
                    </div>
                </div>
            </div>
            <!-- 第二行 -->
            <div class="m2">
                <div class="m2-list1" id="echart1">
                    
                </div>
                <div class="m2-list2" id="echart2">

                </div>
                <div class="m2-list3" id="echart3">

                </div>
            </div>
            <!-- 第三行 -->
            <div class="m3">
                <div class="m3-list1" id="echart4">

                </div>
                <div class="m3-list2">
                    <el-table
                    class="table1"
                    :data="tableData"
                    v-loading="loading"
                    style="width: 100%">
                        <el-table-column
                            class="col1"
                            show-overflow-tooltip="true"
                            prop="repaircontent"
                            label="维修内容"
                            width="150">
                            
                        </el-table-column>
                        <el-table-column
                            prop="createtime"
                            label="保修时间"
                            width="180">
                        </el-table-column>
                        <!-- <el-table-column
                            prop="resultstatus"
                            label="状态">
                            <template slot-scope="scope">
                                <el-tag>
                                    {{ scope.row. resultstatus}}
                                </el-tag>
                            </template>
                        </el-table-column> -->
                        <el-table-column
                        prop="resultstatus"
                        label="状态"
                        width="100"
                        >
                        <template slot-scope="scope">
                            
                            <el-tooltip class="item" effect="light" :content="fun1(scope.row.resultstatus)" placement="top">
                                <el-tag
                                :type="scope.row.resultstatus == '已修复' ? 'success' : 'warning'"
                                disable-transitions>{{scope.row.resultstatus}}</el-tag>
                            </el-tooltip>
                        </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                        class="page1"
                        layout="prev, pager, next"
                        page-size="4"
                        @current-change="changepage"
                        :total=total>
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import vHead from "../components/header"
    import vueSeamlessScroll from 'vue-seamless-scroll'
    import * as echarts from 'echarts';
    export default {
        name: "index",
        components:{
            vHead,
            vueSeamlessScroll,
            loading:true
        },
        data(){
            return{
                info:[],
                // 四小只
                unumber:0,
                onumber:0,
                cnumber:0,
                fnumber:0,
                // 饼状图信息
                pandata: [
                    { value: 0, name: 'A区' },
                    { value: 0, name: 'B区' },
                    { value: 0, name: 'C区' },
                    { value: 0, name: 'D区' },
                ],
                // 柱状图信息
                columndata:[
                    { product: 'A区车位', '车位数': 0, '已分配量': 0, '已缴费': 0 },
                    { product: 'B区车位', '车位数': 0, '已分配量': 0, '已缴费': 0 },
                    { product: 'C区车位', '车位数': 0, '已分配量': 0, '已缴费': 0 },
                    { product: 'D区车位', '车位数': 0, '已分配量': 0, '已缴费': 0 }
                ],
                //雷达图信息
                radardata:[
                            {
                            value: [4200, 3000, 20000, 35000, 50000, 18000],
                            name: '计费项目'
                            },
                        ],
                monthlist:[],
                monthmessage:[],
                tableData: [],
                //右下角
                page:{
                    currPage: 0,
                    pageNum: 4
                },
                //页面总数
                total:0,
                
            }
        },
        created(){
            this.getSroll()
            this.getusernumber()
            this.getordernumber()
            this.getcarnumber()
            this.getfeedbacknumber()
            this.getmonthlist()
            this.getpagemessage()
            
        },
        mounted(){
            this.getpancakemessage()
            this.getcolumnmessage()
            
            this.getradarmessage()
            this.getmonthmessage()
        },
        computed:{
            defineScroll() {
                return {
                    step: 2, // 数值越大速度滚动越快
                    limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                    hoverStop: true, // 是否开启鼠标悬停stop
                    direction: 1, // 0向下 1向上 2向左 3向右
                    openWatch: true, // 开启数据实时监控刷新dom
                    singleHeight: 60, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                    singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                    waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
                };
            },
        },
        methods:{
            //得到滚动数据
            getSroll(){
                this.$axios.get("http://community.byesame.com/poster/getPosterData",{params:{
                    currPage: 0,
                    pageNum: 100,
                }}).then((res)=>{
                    console.log(res.data,"滚动数据")
                    this.info = res.data.data
                    for(let i =0;i<this.info.length;i++){
                        const ukDate = new Date(this.info[i].createtime);  
                        const hours = ukDate.getUTCHours() + 8;
                        let date = new Date(ukDate);  
                        if (hours >= 24) {  
                            date.setUTCDate(date.getUTCDate() + 1);  
                            hours -= 24;  
                        }  
                        const year = date.getUTCFullYear();  
                        const month = String(date.getUTCMonth() + 1).padStart(2, '0');  
                        const day = String(date.getUTCDate()).padStart(2, '0');  
                        const minutes = String(date.getUTCMinutes()).padStart(2, '0');  
                        const seconds = String(date.getUTCSeconds()).padStart(2, '0');  
                        this.info[i].createtime = `${year}-${month}-${day} ${String(hours).padStart(2, '0')}:${minutes}:${seconds}`;
                    }
                    console.log("修改完的数据",this.info)
                    
                })
            },
            //得到用户数
            getusernumber(){
                this.$axios.get("http://community.byesame.com/users/getUsersData",{params:{
                    currPage: 0,
                    pageNum: 4,
                }}).then((res)=>{
                    this.unumber = res.data.total
                })
            },
            //得到计费订单数量
            getordernumber(){
                this.$axios.get("http://community.byesame.com/cost/getPayMessage",{params:{
                    currPage: 0,
                    pageNum: 4,
                }}).then((res)=>{
                    this.onumber = res.data.total
                })
            },
            //得到车位总量
            getcarnumber(){
                this.$axios.get("http://community.byesame.com/parking/getParkOrder",{params:{
                    currPage: 0,
                    pageNum: 4,
                }}).then((res)=>{
                    this.cnumber = res.data.total
                })
            },
            //得到用户反馈数量
            getfeedbacknumber(){
                this.$axios.get("http://community.byesame.com/poster/getFeedBack",{params:{
                    currPage: 0,
                    pageNum: 4,
                }}).then((res)=>{
                    this.fnumber = res.data.total
                })
            },
            //得到饼状图
            getpancake(){
                var myChart = echarts.init(document.getElementById('echart1'));
                myChart.setOption({
                    title: {
                        text: '小区分布统计',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                        mark: { show: true },
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                        name: '小区分布',
                        type: 'pie',
                        radius: '50%',
                        color:["#D8ECFF","#B0F5AA","#339DFF","#F5DE6C",],
                        data: this.pandata,
                        label: {
                            alignTo: 'edge',
                            formatter: '{name|{b}}\n{time|{c} 幢}',
                            minMargin: 5,
                            edgeDistance: 10,
                            lineHeight: 15,
                            rich: {
                            time: {
                                fontSize: 10,
                                color: '#999'
                            }
                            }
                        },
                        emphasis: {
                            itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                        }
                    ]
                });
            },
            //得到饼状图信息
            getpancakemessage(){
                this.$axios.get("http://community.byesame.com/house/searchList",{params:this.$store.state.prim.panA}).then((res)=>{
                    this.pandata[0].value = res.data.total
                    return this.$axios.get("http://community.byesame.com/house/searchList",{params:this.$store.state.prim.panB})
                }).then((res)=>{
                    this.pandata[1].value = res.data.total
                    return this.$axios.get("http://community.byesame.com/house/searchList",{params:this.$store.state.prim.panC})
                }).then((res)=>{
                    this.pandata[2].value = res.data.total
                    console.log(this.$store.state.prim.panD)
                    return this.$axios.get("http://community.byesame.com/house/searchList",{params:this.$store.state.prim.panD})
                }).then((res)=>{
                    this.pandata[3].value = res.data.total
                    this.getpancake()
                    console.log("执行完毕")
                })
                
            },
            //得到柱状图
            getcolumn(){
                var myChart = echarts.init(document.getElementById('echart2'));
                var option = {
                    title: {
                        text: '车位数/已分配量/已缴费',
                        left: 'left'
                    },
                    legend: {
                        orient: 'horizontal',
                        left: 'right'
                    },
                    tooltip: {},
                    dataset: {
                        dimensions: ['product', '车位数', '已分配量', '已缴费'],
                        source: this.columndata,
                    },
                    xAxis: { data: ["A区车位", "B区车位", "C区车位", "D区车位"] },
                    yAxis: {},
                    series: [{ type: 'bar',color:"#5470C6" }, { type: 'bar',color:"#91CC75" }, { type: 'bar',color:"#DDB7FA" }]
                };
                myChart.setOption(option);
            },
            //柱状图信息
            getcolumnmessage(){
               this.$axios.get("http://community.byesame.com/parking/getParkData",{params:this.$store.state.prim.A1}).then((res)=>{
                    this.columndata[0]['车位数'] = res.data.total
                    console.log(1)
                    return this.$axios.get("http://community.byesame.com/parking/getParkData",{params:this.$store.state.prim.A2})
               }).then((res)=>{
                    this.columndata[0]['已分配量'] = res.data.total
                    console.log(2)
                    return this.$axios.get("http://community.byesame.com/parking/getParkData",{params:this.$store.state.prim.B1})
               }).then((res)=>{
                    this.columndata[1]['车位数'] = res.data.total
                    console.log(3)
                    return this.$axios.get("http://community.byesame.com/parking/getParkData",{params:this.$store.state.prim.B2})
               }).then((res)=>{
                    this.columndata[1]['已分配量'] = res.data.total
                    console.log(4)
                    return this.$axios.get("http://community.byesame.com/parking/getParkData",{params:this.$store.state.prim.C1})
               }).then((res)=>{
                    this.columndata[2]['车位数'] = res.data.total
                    console.log(5)
                    return this.$axios.get("http://community.byesame.com/parking/getParkData",{params:this.$store.state.prim.C2})
               }).then((res)=>{
                    this.columndata[2]['已分配量'] = res.data.total
                    console.log(6)
                    return this.$axios.get("http://community.byesame.com/parking/getParkData",{params:this.$store.state.prim.D1})
               }).then((res)=>{
                    this.columndata[3]['车位数'] = res.data.total
                    console.log(7)
                    return this.$axios.get("http://community.byesame.com/parking/getParkData",{params:this.$store.state.prim.D2})
               }).then((res)=>{
                    this.columndata[3]['已分配量'] = res.data.total
                    console.log(8)
                    return this.$axios.get("http://community.byesame.com/parking/getParkOrder",{params:this.$store.state.prim.A3})
               }).then((res)=>{
                    this.columndata[0]['已缴费'] = res.data.total
                    return this.$axios.get("http://community.byesame.com/parking/getParkOrder",{params:this.$store.state.prim.B3})
               }).then((res)=>{
                    this.columndata[1]['已缴费'] = res.data.total
                    return this.$axios.get("http://community.byesame.com/parking/getParkOrder",{params:this.$store.state.prim.C3})
               }).then((res)=>{
                    this.columndata[2]['已缴费'] = res.data.total
                    return this.$axios.get("http://community.byesame.com/parking/getParkOrder",{params:this.$store.state.prim.D3})
               }).then((res)=>{
                    this.columndata[3]['已缴费'] = res.data.total
                    this.getcolumn()
               })
               
            },
            //得到雷达图
            getradar(){
                var myChart = echarts.init(document.getElementById('echart3'));
                var option = {
                    title: {
                        text: '缴费项目订单',
                        left:"right"
                    },
                    legend: {
                        data: ['计费项目'],
                        left:"left"
                    },
                    
                    radar: {
                        // shape: 'circle',
                        indicator: [
                        { name: '电费单', max: 14 },
                        { name: '宽带费单', max: 14 },
                        { name: '物业费单', max: 14 },
                        { name: '天然气单', max: 14 },
                        { name: '水费按量单', max: 14 },
                        { name: '水费固定月单', max: 14 }
                        ],
                        splitArea: {
                            areaStyle: {
                                color: '#FFEEF3',
                            }
                        },
                        
                    },
                    series: [
                        {
                        name: '缴费项目订单',
                        type: 'radar',
                        color:"#109EFF",
                        label: {
                            show: true,
                            formatter: '{c}'
                        },
                        areaStyle: {
                            color: '#109EFF', //面积
                        }, 
                        data: this.radardata
                        }
                    ]
                };
                myChart.setOption(option);
            },
            //得到雷达图信息
            getradarmessage(){
                this.$axios.get("http://community.byesame.com/cost/getCostData",{params:this.$store.state.prim.radar1}).then((res)=>{
                    this.radardata[0].value[0] = res.data.total
                    return this.$axios.get("http://community.byesame.com/cost/getCostData",{params:this.$store.state.prim.radar2})
                }).then((res)=>{
                    this.radardata[0].value[1] = res.data.total
                    return this.$axios.get("http://community.byesame.com/cost/getCostData",{params:this.$store.state.prim.radar3})
                }).then((res)=>{
                    this.radardata[0].value[2] = res.data.total
                    return this.$axios.get("http://community.byesame.com/cost/getCostData",{params:this.$store.state.prim.radar4})
                }).then((res)=>{
                    this.radardata[0].value[3] = res.data.total
                    return this.$axios.get("http://community.byesame.com/cost/getCostData",{params:this.$store.state.prim.radar5})
                }).then((res)=>{
                    this.radardata[0].value[4] = res.data.total
                    return this.$axios.get("http://community.byesame.com/cost/getCostData",{params:this.$store.state.prim.radar6})
                }).then((res)=>{
                    this.radardata[0].value[5] = res.data.total
                    this.getradar()
                })

            },
            //得到折线图
            getline(){
                var myChart = echarts.init(document.getElementById('echart4'));
                var option = {
                    title: {
                        text: '当月用户访问情况',
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {},
                    grid: {
                        left: '0',
                        right: '0',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        show: true,
                        feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.monthlist
                    },
                    yAxis: {
                        type: 'value',
                        axisLabel: {
                        }
                    },
                    series: [
                        {
                        name: '用户访问量',
                        type: 'line',
                        data: this.monthmessage,
                        smooth: true,
                        color:"#19D4AE",
                        markPoint: {
                            data: [{ name: '周最低', value: -2, xAxis: 1, yAxis: -1.5 }]
                        },
                        markLine: {
                            data: [

                            [
                                {
                                symbol: 'none',
                                },
                                {
                                symbol: 'circle',
                                
                                type: 'max',
                                name: '最高点'
                                }
                            ]
                            ]
                        }
                        }
                    ]
                };
                myChart.setOption(option);
            },
            //创建月份列表
            getmonthlist(){
                for(let i =0;i<32;i++){
                    if(i<10){
                        this.monthlist.push("0"+i)
                    }
                    else{
                        this.monthlist.push(""+i)
                    }
                }
                console.log(this.monthlist,"月份")
            },
            //得到本月数据
            getmonthmessage(){
                this.$axios.get("http://community.byesame.com/users/getLoginMonth").then((res)=>{
                    console.log("本月数据",res.data)
                    let a = []
                    const now = new Date();
                    for(let i=0;i<32;i++){
                        a[i]=0;
                    }
                    for(let i =0;i<res.data.length;i++){
                        const date = new Date(res.data[i].createtime); 
                        let time = date.toLocaleString('zh-CN');
                        let month = time.split(" ")[0].split("/")
                        if(month[1] = now.getMonth() + 1  ){
                            let day = month[2]
                            a[day]++;
                        }
                        
                    }
                    this.monthmessage = a;
                    this.getline()
                })
            },
            //得到分页信息
            getpagemessage(){
                this.$axios.get("http://community.byesame.com/poster/getRepairData",{params:this.page}).then((res)=>{
                    console.log(res.data,"页面信息")
                    this.tableData = res.data.data
                    this.total = res.data.total
                    for(let i = 0;i<this.tableData.length;i++){
                        const date = new Date(this.tableData[i].createtime);
                        const utcHours = date.getUTCHours();  
                        const beijingHours = (utcHours + 8) % 24;
                        const minutes = date.getUTCMinutes();  
                        const seconds = date.getUTCSeconds();
                        const formattedTime = `${date.getUTCFullYear()}-${date.getUTCMonth() + 1}-${date.getUTCDate()} ${beijingHours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                        this.tableData[i].createtime = formattedTime;
                        if(this.tableData[i].resultstatus==1){
                            this.tableData[i].resultstatus="已修复"
                        }else{
                            this.tableData[i].resultstatus="待处理"
                        }
                    }
                    console.log(res.data,"处理之后")
                })
            },
            //页面标签
            filterTag(value, row) {
                return row.resultstatus === value;
            },
            //切页
            changepage(num){
                this.page.currPage = num-1
                console.log("页码数",num)
                this.getpagemessage()
            },
            //信息提示
            fun1(data){
                if(data == "已修复"){
                    return "状态1"
                }
                else{
                    return "状态2"
                }
            },
            //跳转
            topage(){
                this.$router.push({
                    path:"/service/postMessage",
                })
            }
        }

    }
</script>
<style scoped lang="scss">
.home{
    .top{
        display: flex;
        overflow: hidden;
        align-items: center;
        padding-top: 56px;
        background-color: white;
        .top-notice{
            display: flex;
            line-height: 60px;
            align-items: center;
            .notice1{
                width: 30px;
                line-height: 60px;
            }
            .notice2{

            }
        }
        .top-scoll{
            height: 60px;
            line-height: 60px;
            margin-left: 50px;
            flex: 1;
            .top-ul{
                .top-li{
                    display: flex;
                    font-weight: bold;
                    height: 60px;
                    .li1{
                        flex: 1;
                    }
                    .li2{
                        flex: 2;
                        white-space: nowrap; /* 防止文本换行 */  
                        overflow: hidden; /* 隐藏超出容器的部分 */  
                        text-overflow: ellipsis;
                        padding-right: 50px;
                    }
                    .li3{
                        flex: 1;
                        display: flex;
                        .li3-content{

                        }
                        .li3-to{
                            color: #389AF9;
                            font-weight: bold;
                        }
                    }
                }
            }
        }
    }
    .middle{
        padding: 0 20px;
        background-color: #F0F0F0;
        .m1{
            display: flex;
            padding: 10px 0;
            .m1-list1{
                flex: 1;
                height: 111px;
                background-color: white;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                .m1-left{
                    margin-right: 80px;
                }
                .m1-right{
                    .m1-number{
                        font-size: 32px;
                        font-weight: bold;
                    }
                    .m1-title{

                    }
                }
            }
            .m1-list2{
                flex: 1;
                height: 111px;
                background-color: white;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                .m1-left{
                    margin-right: 80px;
                }
                .m1-right{
                    .m1-number{
                        font-size: 32px;
                        font-weight: bold;
                    }
                    .m1-title{

                    }
                }
            }
            .m1-list3{
                flex: 1;
                height: 111px;
                background-color: white;
                margin-right: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                .m1-left{
                    margin-right: 80px;
                }
                .m1-right{
                    .m1-number{
                        font-size: 32px;
                        font-weight: bold;
                    }
                    .m1-title{

                    }
                }
            }
            .m1-list4{
                flex: 1;
                height: 111px;
                background-color: white;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                .m1-left{
                    margin-right: 80px;
                }
                .m1-right{
                    .m1-number{
                        font-size: 32px;
                        font-weight: bold;
                    }
                    .m1-title{

                    }
                }
            }
        }
        .m2{
            display: flex;
            .m2-list1{
                flex: 1;
                margin-right: 15px;
                background-color: white;
                height: 291px;
                border-radius: 10px;
            }
            .m2-list2{
                flex: 1;
                margin-right: 15px;
                background-color: white;
                height: 291px;
                border-radius: 10px;
            }
            .m2-list3{
                flex: 1;
                background-color: white;
                height: 291px;
                border-radius: 10px;
            }
        }
        .m3{
            display: flex;
            margin-top: 15px;
            padding-bottom: 10px;
            .m3-list1{
                flex: 9;
                height: 280px;
                margin-right: 15px;
                background-color: white;
                border-radius: 10px;
                box-sizing: border-box;
                padding: 10px 30px;
            }
            .m3-list2{
                flex: 4;
                height: 280px;
                background-color: white;
                border-radius: 10px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                .table1{
                    flex: 6;
                }
                .page1{
                    flex: 1;
                    text-align: center;
                }
            }
        }
    }
    
}

</style>